<template>
	<view class="page">

		<view style="background-color: #fff;width: 100%;">
			<view class="phonenumber">
				<span class="sp_1">性伴手机号<span class="sp_2">*</span> </span>
				<input type="text" class="inp_1" v-model="this.phone" placeholder="请输入手机号">
			</view>
			<view class="phonenumber">
				<span class="sp_1">验证码<span class="sp_2">*</span> </span>
				<input type="text" class="inp_1" style="width: 30%;" v-model="yanzhengma_text" placeholder="请输入验证码">
				<button style="float: right;
			margin-top: 20rpx;
			font-size: 30rpx;width: 30%;" @click="yanzhengma" :disabled="disableButton">{{ buttonText }}</button>
			</view>
			<button class="bt_2" @click="go_info">绑定手机号</button>
		</view>

	</view>
</template>

<script>
	import {
		SendCode,
		DisposeUserrelationship
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				disableButton: false, // 初始时按钮可点击
				buttonText: '发送验证码',
				countdown: 0, // 倒计时初始值
				phone: '', //性伴手机号
				yanzhengma_text: '', //验证码
				yanzhengma_api: '',
			}
		},
		methods: {

			yanzhengma() {
				if (!this.disableButton) { // 如果按钮可点击
					// 处理按钮点击逻辑
					console.log('按钮被点击了');

					SendCode({
						phone: this.phone
					}).then(res => {
						console.log(res);
						if (res.Code == 200) {
							this.yanzhengma_api = res.Data.Code
							// 按钮变为不可点击状态
							this.disableButton = true;
							this.countdown = 60
							// 开启60秒倒计时
							let timer = setInterval(() => {
								this.countdown--;
								if (this.countdown <= 0) {
									clearInterval(timer);
									this.disableButton = false; // 恢复按钮可点击
									this.buttonText = '发送验证码';
								} else {
									this.buttonText = `${this.countdown} s`;
								}
							}, 1000);

						}

					}).catch(err => {
						console.log(err);
					})


				}
			},
			//新增性伴
			go_info() {
				//验证并处理关系信息
				let data1 = this.$store.state.vx_uid
				let data2 = '性伴'
				let data3 = this.phone
				if ((this.yanzhengma_text != this.yanzhengma_api)||(this.yanzhengma_text ==='') ) {
					uni.showToast({
						title: `验证码错误`,
						icon: 'error',
						duration: 2000
					})
				} else {
					this.$store.commit('$uStore', {
						name: 'xingban_user',
						value: this.phone
					})
					DisposeUserrelationship(
						data1, data2, data3
					).then(res => {
						console.log(res);
						if (res.Data.UserExists === true) {
						uni.showModal({
							content: '绑定成功。',
							showCancel: false,
							success(res) {
								if (res.confirm) {
									uni.navigateTo({
										url:'../XBGL_01/XBGL_01'
									})
								}
							}
						})
						} else {
							uni.showModal({
								title: '提示',
								content: '该手机号无用户信息，请添加用户信息',
								showCancel: false,
								success: (res) => {
									if (res.confirm) {
										console.log('用户点击确定');
										uni.navigateTo({
											url: '/page_jiankangdangan/XBGL_03/XBGL_03'
										})
									}
								}
							});
						}

					}).catch(res => {
						console.log(res);
						if (res.Data.UserExists === true) {
						uni.showModal({
							content: '绑定成功。',
							showCancel: false,
							success(res) {
								if (res.confirm) {
									uni.navigateTo({
										url:'../XBGL_01/XBGL_01'
									})
								}
							}
						})
						} else {
							uni.showModal({
								title: '提示',
								content: '该手机号无用户信息，请添加用户信息',
								showCancel: false,
								success: (res) => {
									if (res.confirm) {
										console.log('用户点击确定');
										uni.navigateTo({
											url: '/page_jiankangdangan/XBGL_03/XBGL_03'
										})
									}
								}
							});
						}
					})
				}

			},


		}
	}
</script>

<style scoped lang="scss">
	.page {
		width: 100vw;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		overflow: auto;

		.more_num {
			text-align: center;
			border-color: #e5e5e5;
			margin: 20rpx 0rpx 0rpx 38%;
			width: 250rpx;
			height: 40rpx;
			background-color: #fff;
			line-height: 40rpx;
			font-size: 28rpx;
			font-family: Source Sans Pro, Source Sans Pro;
			font-weight: 400;
			color: #1677FF;
		}





		.bt_2 {
			width: 622rpx;
			height: 98rpx;
			background: #1677FF;
			margin: 200rpx auto 20rpx;
			font-size: 36rpx;
			font-family: Source Sans Pro, Source Sans Pro;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 98rpx;
		}

		.phonenumber {
			width: 686rpx;
			height: 112rpx;
			border-bottom: 1rpx solid #E7E7E7;
			margin-left: 32rpx;

			.bt_1 {
				float: right;
				margin-top: 20rpx;
				font-size: 30rpx;
			}


			.sp_1 {
				display: inline-block;
				margin-top: 32rpx;
				font-weight: 400;
				width: 200rpx;
				height: 48rpx;
				float: left;
				font-size: 32rpx;
				line-height: 48rpx;

				.sp_2 {
					color: red;
				}
			}

			.inp_1 {
				float: left;
				height: 70rpx;
				margin-top: 20rpx;
				border-radius: 10rpx;
				padding-left: 10rpx;
				border: 1rpx solid #e5e5e5;
			}


		}
	}
</style>